<template>
  <HeaderComponent/>
  <div id="Catalog">
    <div id="Search1" class="Search1">
      <!-- Use v-on:click instead of onclick -->
      <button class="title" type="submit" id="btn_category" v-on:click="ShowCategory"> Category</button>
      <!-- Use v-on:click instead of onclick -->
      <button class="changeBtn" type="submit" id="btn_product" v-on:click="ShowProduct">Product</button>
      <!-- Use v-on:click instead of onclick -->
      <button class="changeBtn" type="submit" id="btn_item" v-on:click="ShowItem">Item</button>
      <input id="searchbar" type="text" name="keyword" />
      <input type="submit" name="searchProducts" value="Search" />
    </div>

    <!-- Use v-if to toggle between category, product, and item sections -->
    <div id="category" v-if="showCategory">
      <h2>Category</h2>
      <table>
        <tr>
          <th><b>image</b></th>
          <th><b>Category ID</b></th>
          <th><b>name</b></th>
          <th><b>&nbsp;</b></th>
          <th><b>&nbsp;</b></th>
        </tr>

        <!-- Use v-for instead of th:each -->
        <tr v-for="category in categoryList" :key="category.categoryId">
          <td>
            <img :src="'/src'+category.description" style="width: 100px; height: 100px"/>
          </td>
          <td>{{ category.categoryId }}</td>
          <td>{{ category.name }}</td>
          <td>
            <!-- Use v-bind instead of th:href -->
            <button @click="removeCategory(category.categoryId)" class="Button">Remove</button>
          </td>
          <td>
            <!-- Use v-bind instead of th:href -->
            <button @click="changeCategory(category.CategoryId)" class="Button" type="button">Change</button>
          </td>
        </tr>
      </table>
      <p align="center">
        <!-- Use v-bind instead of th:href -->
        <a :href="`/manage/addCategory`" class="Button">Add a new one</a>
      </p>
    </div>

    <!-- Repeat similar changes for product and item sections -->
    <div id="product" v-if="showProduct">
      <h2>Product</h2>
      <table>
        <tr>
          <th><b>image</b></th>
          <th><b>Category</b></th>
          <th><b>Product ID</b></th>
          <th><b>name</b></th>
          <th><b>Description</b></th>
          <th><b>&nbsp;</b></th>
          <th><b>&nbsp;</b></th>
        </tr>

        <!-- Use v-for instead of th:each -->
        <tr v-for="product in productList" :key="product.productId">
          <td>
            <img :src="'/src'+product.image" style="width: 100px; height: 100px"/>
          </td>
          <td>{{ product.categoryId }}</td>
          <td>{{ product.productId }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.description }}</td>
          <td>
            <!-- Use v-bind instead of th:href -->
            <button @click="removeProduct"  class="Button">Remove</button>
          </td>
          <td>
            <!-- Use v-bind instead of th:href -->
            <button @click="changeProduct(product.ProductId)"  class="Button" type="button">Change</button>
          </td>
        </tr>
      </table>
      <p align="center">
        <!-- Use v-bind instead of th:href -->
        <a :href="`/manage/addProduct`" class="Button">Add a new one</a>
      </p>
    </div>

    <div id="item" v-if="showItem">
      <h2>Item</h2>
      <table>
        <tr>
          <th><b>Product ID</b></th>
          <th><b>Item ID</b></th>
          <th><b>Unit Price</b></th>
          <th><b>Description</b></th>
          <th><b>&nbsp;</b></th>
          <th><b>&nbsp;</b></th>
        </tr>

        <!-- Use v-for instead of th:each -->
        <tr v-for="item in itemList" :key="item.itemId">
          <td>{{ item.productId }}</td>
          <td>{{ item.itemId }}</td>
          <td>{{ item.unitCost }}</td>
          <td>{{ item.listPrice }}</td>
          <td>
            <!-- Use v-bind instead of th:href -->
            <button @click="removeItem(item.itemId)" class="Button">Remove</button>
          </td>
          <td>
            <!-- Use v-bind instead of th:href -->
            <a @click="changeItem(item.ItemId)" class="Button" type="button">Change</a>
          </td>
        </tr>
      </table>
      <p align="center">
        <!-- Use v-bind instead of th:href -->
        <a :href="`/manage/addItem`" class="Button">Add a new one</a>
      </p>
    </div>
  </div>
  <FooterComponent/>
</template>

<script>
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";
import axios from "axios";

export default {
  components: {FooterComponent, HeaderComponent},
  data() {
    return {
      showCategory: false,
      showProduct: false,
      showItem: true,
      categoryList: [],
      productList: [],
      itemList: [],
    };
  },
  mounted() {
    // 在组件挂载时发送请求获取商品详情
    this.fetchManage();
  },
  methods: {
    fetchManage(){
      axios.get('http://localhost:8090/manage/viewProductManage')
    .then(response => {

              this.categoryList = response.data.data;
              this.productList = response.data.data1;
              this.itemList = response.data.data2;
          })
    },
     test(){
          location.reload();
      },
    removeCategory(category){
      axios.post('http://localhost:8090/managecatalog/viewDeleteCategory',{
        CategoryId: category,
      },{
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        setTimeout(this.test, 300);
        // 请求成功处理
        // 跳转到第二个界面，传递搜索结果
        console.log(response.data);
        this.$router.push('/manage/productManage')
        });
    },
    removeProduct(product){
      axios.post('http://localhost:8090/managecatalog/viewDeleteProduct',{
        ProductId: product,
      },{
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        setTimeout(this.test, 300);
        // 请求成功处理
        // 跳转到第二个界面，传递搜索结果
        console.log(response.data);
        this.$router.push('/manage/productManage')
        });
    },
    removeItem(itemid){
      axios.post('http://localhost:8090/managecatalog/viewDeleteItem',{
       ItemId: itemid,
      },{
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        setTimeout(this.test, 300);
        // 请求成功处理
        // 跳转到第二个界面，传递搜索结果
        console.log(response.data);
        this.$router.push('/manage/productManage')
        });
    },
    changeCategory(categoryId){
      this.$router.push('/manage/changeCategory/'+categoryId);
    },
     changeProduct(productId){
      this.$router.push('/manage/changeProduct/'+productId);
    },
     changeItem(itemId){
      this.$router.push('/manage/changeItem/'+itemId);
    },
    ShowCategory() {
      this.showCategory = true;
      this.showProduct = false;
      this.showItem = false;
    },
    ShowProduct() {
      this.showCategory = false;
      this.showProduct = true;
      this.showItem = false;
    },
    ShowItem() {
      this.showCategory = false;
      this.showProduct = false;
      this.showItem = true;
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/productManage.css";
</style>